﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="layui-card">
    <div class="layui-card-body">
          <table class="layui-table" id="tabextend">
                        <colgroup>
                            <col width="200">
                            <col width="200">
                            <col width="240">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>验证规则</th>
                                <th>参数</th>
                                <th>错误提示</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(ViewBag.ExtendsList!=null && ViewBag.ExtendsList.Count>0){
                                  foreach (var item in ViewBag.ExtendsList)
                                {
                                    <tr>
                                        <td><input type="hidden" name="rule" value="@item["type"]" />@item["type"]</td>
                                        <td><input type="hidden" name="ruleparam" value="@item["value"]"   />@item["value"]</td>
                                        <td><input type="hidden" name="rulemsg" value="@item["message"]"  />@item["message"] </td>
                                        <td><button class="pear-btn pear-btn-xs pear-btn-danger del">删除</button></td>
                                    </tr>
                                    }
                            }
                        </tbody>
          </table>
          <button type="button" class="pear-btn pear-btn-md" id="btnrule">添加验证规则</button>
           <form class="layui-form" lay-filter="rule-form">
                <input type="hidden" name="Id" value="@Model.Id" />
                <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-hide" lay-submit lay-filter="rule-submit" id="rule-submit">提交</button>
                </div>
            </div>
           </form>
    </div>
</div>

<div class="layer-rule" style="display:none;">
    <div class="layui-card">
        <div class="layui-card-header">添加验证规则</div>
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="config-form" style="padding: 15px 0 0 0;">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">验证规则</label>
                    <div class="layui-input-block">
                        <select lay-verify="required" lay-filter="ruletype" id="selrule" name="ruletype">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item regex" style="display:none;">
                    <label class="layui-form-label layui-form-required">
                        正则表达式
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="rulevalue"    placeholder="请输入正则表达式" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label layui-form-required">
                        错误提示
                    </label>
                    <div class="layui-input-block">
                        <input type="text"  name="message" placeholder="请输入错误提示" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-primary pear-btn-md" lay-submit lay-filter="addrule-submit" id="addrule-submit">确定</button>
                        <button class="pear-btn pear-btn-md" id="btnClose">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>



@section scripts{
    <script>
        var  ruleData =@Html.Raw(ViewBag.ValidateTypeJson);
         layui.use([ 'form', 'lscom', 'drawer'], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let drawer = layui.drawer;
            let lscom = layui.lscom;

            var index = parent.layer.getFrameIndex(window.name);

            window.submitForm = function () {
                $("#rule-submit").click();
            }
            $(document).on('click','.del',function(){
              $(this).parents('tr').remove();
            });
            var ruledrawer;
            $("#btnrule").click(function() {
                setoptions();
                ruledrawer = drawer.open({
                    direction: "right",
                    dom: ".layer-rule",
                    distance: "50%",
                    maskClose: false
                });
            })
            $("#btnClose").click(function() {
                ruledrawer.close();
                return false;
            })
             form.on('select(ruletype)', function(data) {
                var slval = data.value;
                if(slval=="Regex"){
                    $('.regex').show();
                    $('input[name="rulevalue"]').attr("lay-verify","required");
                }else{
                    $('.regex').hide();
                    $('input[name="rulevalue"]').removeAttr("lay-verify");
                }
              var txt=$('#selrule').find('option:selected').text();
               $("input[name='message']").val(txt.replace(slval+':',''));
            });
            form.on('submit(rule-submit)', function (data) {
                var  rules=[];
                $('#tabextend tbody tr').each(function(){
                    var r=$(this).find("input[name='rule']").val();
                    var p=$(this).find("input[name='ruleparam']").val();
                    var m=$(this).find("input[name='rulemsg']").val();
                  rules.push({type:r,value:p,message:m});
                });
                data.field.StyleRules =JSON.stringify(rules);
                var field = data.field;
                var waitIndex = parent.layer.load(2);
                lscom.ajax({
                    url: "/Cms/Tablestyle/SaveRule",
                    data: JSON.stringify(field),
                    lsHandleError: false
                }).done(function (data) {
                    if (data.code == 0) {
                        data.index = index;
                        let parentWindow = parent.selectedWindow().window;
                        parentWindow.saveCallback(data);
                    }
                }).fail(function (message) {
                    lscom.notify.error(message);
                }).always(function () {
                    parent.layer.close(waitIndex);
                });
                return false;
            });

            form.on('submit(addrule-submit)', function (data) {
                var field = data.field;
                var waitIndex = parent.layer.load(2);
                var _tr='<tr>';
                _tr +='<td><input type="hidden" name="rule" value="'+field.ruletype+'" />'+field.ruletype+'</td>';
                _tr +='<td><input type="hidden" name="ruleparam" value="'+field.rulevalue+'"  />'+field.rulevalue+'</td>';
                _tr +='<td><input type="hidden" name="rulemsg"  value="'+field.message+'" />'+field.message+'</td>';
                _tr +='<td><button class="pear-btn pear-btn-xs pear-btn-danger del">删除</button></td>';
                _tr +='</tr>';
               $("#tabextend tbody").append(_tr);
               parent.layer.close(waitIndex);
               ruledrawer.close();
               return false;
            });

            function setoptions(){
                var rules =getrules();
                $('#selrule').empty();
                var options='<option value="">请选择</option>';
                for(var i =0;i<ruleData .length;i++){
                    if($.inArray(ruleData[i].Name,rules)<0){
                        options+='<option value="'+ruleData[i].Name+'">'+ruleData[i].Name+':'+ruleData[i].Describe+'</option>';
                    }
                }
                $('#selrule').append(options);
                form.render('select');
            }

            function getrules(){
                var  rules=[];
                $('#tabextend tbody tr').each(function(){
                  rules.push($(this).find("input[name='rule']").val());
                });
                return rules;
            }
        });
    </script>
   
}

